<template>
  <div class="addaddress">
	<header-bar :text="title" :left="left" ></header-bar>
    <div class="addaddr-content">
        <div class="mc_head">币种</div>
        <div class="mc_select" @click="selectMoney()">
            <span>{{popup}}</span>
            <i class="iconfont icon-you"></i>      
        </div>
    </div>
    <div class="addaddr-content">
        <div class="mc_head">地址</div>
        <input type="text" placeholder="请输入地址或长按粘贴地址" v-model="address">
    </div>
    <div class="postaddbtnbg">
        <div :class="{postaddbtn:address}" @click="addaddr(address)">提交</div>
    </div>
    <div class="addwxts">
        <div class="addr_wxts">
        <b>温馨提示：</b>
         <p>1、该地址仅作为核实充币记录。</p>
	  	<p>2、出错奖会原路返回出错奖会原路返回出错奖会原路返回</p>
    </div>
    </div>
    <mt-popup
        v-model="popupVisible">
        <div class="m_fade">
          <div class="mf_h" style="color:#353535;">选择提币类型</div>
        <ul>
          <li v-for="(item,index) in pageInfo.coinType" :key="index" @click="handType(index)">{{item}}</li>
        </ul>
        </div>
      </mt-popup>
  </div>
</template>
<script>
import { Header, Toast,Popup } from "mint-ui";
import { addaddress } from "../../api/api.js";
import { mapState, mapGetters, mapMutations, mapActions} from 'vuex';
import headerBar from '../main/header'
export default {
	name: "AddAddress",
	data() {
		return {
			msg: "",
			addrList: [],
			popupVisible: false,
			popup: "",
			address: "",
			title: "",
			left: {
				status: true
			},
			
		};
	},
	components:{
		headerBar
	},
	computed:{
		...mapState([
			"pageInfo"
		])
	},
	methods: {
		handType(index){
			this.popup = this.pageInfo.coinType[index];
			this.popupVisible = false;
		},
		getaddInfo(id){
			let para = {
				id:id
			}
		   	this.$ajaxGet("addrInfo", para).then(res => {
				this.address = res.data.address;
				this.popup = res.data.coinType;
			});
	  	},
    selectMoney: function() {
      this.popupVisible = true;
    },
    addaddr(a) {
      if (a) {
        let para = {
          coinType: this.popup,
          address: this.address
		};
		if(this.$route.query.id){
			para.id = this.$route.query.id;
		}else{
			para.userId = this.pageInfo.userinfo.id;
		}
		let url = this.$route.query.id ? 'updateaddr' : 'addAddress';
        this.$ajaxPost(url, para).then(res => {
			Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
            this.$router.back();
        });
        
      } else {
        Toast({
          message: "请填写地址",
          position: "bottom",
          duration: 5000
        });
      }
    }
  },
  created(){
	  if(this.$route.query.id){
		 this.title ="编辑地址";
		 this.getaddInfo(this.$route.query.id);
	  }else{
		  this.title = "添加地址";
		  this.popup = this.pageInfo.coinType[0];
	  }
	  
  },
  mounted() {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../../static/css/address.css");
</style>
